<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetstore</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css" media="screen" />

</head>
<body>
<div th:replace="common/top"></div>
<div id="sign-in-container">

    <div id="demo" class="carousel slide myCaroudel " data-ride="carousel">

         <!--指示符-->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
            <li data-target="#demo" data-slide-to="3"></li>
            <li data-target="#demo" data-slide-to="4"></li>
        </ul>

         <!--轮播图片-->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../images/cat-signin.jpg">
            </div>
            <div class="carousel-item">
                <img src="../images/songshu.jpg">
            </div>
            <div class="carousel-item">
                <img src="../images/cat_index.png">
            </div>
            <div class="carousel-item">
                <img src="../images/bird-signin.jpg">
            </div>
            <div class="carousel-item">
                <img src="../images/cat-signin2.jpg">
            </div>
        </div>

        <!--左右切换按钮-->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

    </div>


</div>

<div  >
    <form id="loginForm" action = "/account/signon" method="post" >

        <fieldset  class="Sign-in-Field">
            <legend>Sign In Now</legend>
            <div class="login-form">
                <label for="username" >Username:</label>
                <input type="text" class="input-box" id="username" name="username" placeholder="Username" required autofocus/><br/>
                &nbsp;&nbsp;&nbsp;&nbsp;<span id="isExistInfo"></span><br/>
                <label for="password" >Password:</label>
                <input type="password" id="password" name="password" class="input-box" placeholder="Password" required/><br/>
                <p>
                    Identify Code:
                    <input type="text" value="" id ="text" name = "identify" />
                    <input type="hidden" id = "code_user" name = "code_user" />
                    <input type="hidden" id = "code_true" name = "code_true" />
                    <canvas id="canvas" width="100" height="43" onclick="dj()" name = "try">
                    </canvas>

                    <script>
                        var show_num = [];
                        draw(show_num);
                        function dj(){
                            draw(show_num);
                        }
                        function sublim(){
                            var val=document.getElementById("text").value.toLowerCase();
                            var num = show_num.join("").toLowerCase();
                            if(val===''){
                                alert('Please enter a validation code！');
                                document.getElementById("code_user").value = "0";
                                return false;
                            }else if(val === num){
                                document.getElementById("code_user").value = "1";
                                document.getElementById(".input-val").val('');
                                draw(show_num);
                                return true;
                            }else{
                                alert('Wrong verification code!\nPlease input again！'+show_num);
                                document.getElementById("text").value='';
                                draw(show_num);
                                document.getElementById("code_user").value = "2";
                                return false;
                            }
                        }
                        function draw(show_num) {
                            var canvas_width=document.getElementById('canvas').clientWidth;
                            var canvas_height=document.getElementById('canvas').clientHeight;
                            var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
                            var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
                            canvas.width = canvas_width;
                            canvas.height = canvas_height;
                            var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
                            var aCode = sCode.split(",");
                            var aLength = aCode.length;//获取到数组的长度

                            for (var i = 0; i <= 3; i++) {
                                var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                                var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                                var txt = aCode[j];//得到随机的一个内容
                                show_num[i] = txt;
                                var x = 10 + i * 20;//文字在canvas上的x坐标
                                var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                                context.font = "bold 23px 微软雅黑";

                                context.translate(x, y);
                                context.rotate(deg);

                                context.fillStyle = randomColor();
                                context.fillText(txt, 0, 0);

                                context.rotate(-deg);
                                context.translate(-x, -y);
                            }
                            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                                context.strokeStyle = randomColor();
                                context.beginPath();
                                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                                context.stroke();
                            }
                            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                                context.strokeStyle = randomColor();
                                context.beginPath();
                                var x = Math.random() * canvas_width;
                                var y = Math.random() * canvas_height;
                                context.moveTo(x, y);
                                context.lineTo(x + 1, y + 1);
                                context.stroke();
                            }
                        }
                        function randomColor() {//得到随机的颜色值
                            var r = Math.floor(Math.random() * 256);
                            var g = Math.floor(Math.random() * 256);
                            var b = Math.floor(Math.random() * 256);
                            return "rgb(" + r + "," + g + "," + b + ")";
                        }
                    </script>

                </p>

                <p style="font-size: small">Need a username ?
                    <a href="/account/newAccount">Register Now!</a></p>
                <button class="submit-Btn" >Sign In</button><br/>

            </div>
        </fieldset>
    </form>
</div>
<div align="center">
    <div id="slideBar"></div>

</div>
<script type="text/javascript" src="../../static/js/jquery-3.4.1.js"></script>
<script src="../../static/js/jquery-1.10.2.js"></script>
<script src="../../static/js/dialog.js"></script>
<script type="text/javascript" src="../../static/js/SignIn.js"></script>

<div th:replace="common/bottom">

</div>
</body>
</html>